<script setup lang="ts">
import { computed } from 'vue';
import { $t } from '@/locales';

defineOptions({
  name: 'ProjectNews'
});

// interface NewsItem {
//   id: number;
//   content: string;
//   time: string;
// }

// const newses = computed<NewsItem[]>(() => [
//   { id: 1, content: $t('page.home.projectNews.desc1'), time: '2021-05-28 22:22:22' },
//   { id: 2, content: $t('page.home.projectNews.desc2'), time: '2021-10-27 10:24:54' },
//   { id: 3, content: $t('page.home.projectNews.desc3'), time: '2021-10-31 22:43:12' },
//   { id: 4, content: $t('page.home.projectNews.desc4'), time: '2021-11-03 20:33:31' },
//   { id: 5, content: $t('page.home.projectNews.desc5'), time: '2021-11-07 22:45:32' }
// ]);

interface CardData {
  key: string;
  title: string;
  value: string;
  unit: string;
  color: {
    start: string;
    end: string;
  };
  icon: string;
}

const cardData = computed<CardData[]>(() => [
  {
    key: 'visitCount',
    // title: $t('page.home.visitCount'),
    title: 'Model A',
    value: '可视化、免费地体验通义大模型',
    unit: '',
    color: {
      start: '#00000000', // #00000000
      end: '#00000000'
    },
    icon: 'carbon:ibm-cloud-pak-applications'
  },
  {
    key: 'turnover',
    title: 'Model B',
    value: '通过多种方法进行模型微调训练',
    unit: '',
    color: {
      start: '#00000000',
      end: '#00000000'
    },
    icon: 'carbon:ibm-cloud-pak-applications'
  },
  {
    key: 'downloadCount',
    title: 'Model C',
    value: '为所有模型提供统一的管理视图',
    unit: '',
    color: {
      start: '#00000000',
      end: '#00000000'
    },
    icon: 'carbon:ibm-cloud-pak-applications'
  },
  {
    key: 'dealCount',
    title: 'Model D',
    value: '支持将模型转换为适合业务场景的推理形式',
    unit: '',
    color: {
      start: '#00000000',
      end: '#00000000'
    },
    icon: 'carbon:ibm-cloud-pak-applications'
  }
]);

const onchange = () => {
  console.log('体验体验');
};
const calldoc = () => {
  console.log('调用文档');
};
</script>

<template>
  <NCard :bordered="false" size="small" segmented class="card-wrapper">
    <h3 class="text-18px font-semibold">
      {{ $t('page.home.projectNews.title') }}
    </h3>
    <NList>
      <NGrid cols="s:1 m:2 l:4" responsive="screen" :x-gap="16" :y-gap="16">
        <NGi v-for="item in cardData" :key="item.key" class="border">
          <div class="ml-10px mt-20px flex border-b lh-10">
            <SvgIcon :icon="item.icon" class="text-25px text-gray" />
            <h3 class="ml-5px mt--5px text-16px text-black">{{ item.title }}</h3>
          </div>

          <div class="text-grey ml-10px mt-15px text-12px text-gray">{{ item.value }}</div>
          <div class="mt-30px">
            <NButton strong type="info" class="w-50%" @click="onchange">立即体验</NButton>
            <NButton strong type="info" icon-placement="right" class="w-50%" @click="calldoc">
              <template #icon>
                <icon-ic-outline-call-made class="text-icon" />
              </template>
              调用文档
            </NButton>
          </div>
        </NGi>
      </NGrid>
    </NList>
  </NCard>
</template>

<style scoped></style>
